<script lang="ts" setup>
import MyBox from '@/components/MyBox.vue'
import { ref, watch } from 'vue'
const props = defineProps(['data'])

watch(
  () => props.data,
  (val) => {
    const { xList, yList } = val
    xList.reverse()
    yList.reverse()
    options.value.yAxis.data = xList
    options.value.series[0].data = yList
    //取数组最大值，小于10取10
    // const maxValue = Math.max(...yList)
    // options.value.yAxis.max = maxValue > 10 ? maxValue : 10
  }
)

const options = ref({
  grid: {
    top: 45,
    left: 90
  },
  legend: {
    show: false,
    textStyle: {
      color: '#ebeef5',
      fontSize: 16
    },
    data: []
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    boundaryLink: true, // 设置 tooltip 不超出容器边界
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'value',
    position: 'top',
    axisLabel: {
      color: '#ebeef5',
      fontSize: 16
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#182758',
        width: 2
      }
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    name: '',
    nameTextStyle: {
      color: '#ebeef5',
      fontSize: 16,
      align: 'right',
      padding: [0, 12, 8, 0]
    },
    axisLabel: {
      color: '#ebeef5',
      fontSize: 16,
      align: 'right'
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#182758',
        width: 2
      }
    },
    splitLine: {
      show: false
    },
    data: []
  },
  series: [
    {
      data: [],
      name: '',
      type: 'bar',
      label: {
        show: true,
        position: 'right',
        color: '#fff'
      },
      barWidth: 16,
      color: '#91cc75',
      itemStyle: {
        //圆角
        borderRadius: [30, 30, 30, 30]
      }
    }
  ]
})
</script>
<template>
  <MyBox title="分拣异常卷数" class="input-ratio">
    <template v-slot:main>
      <div class="w-full text-center text-8xl text-red-500 mt-20">
        5
      </div>
    </template>
  </MyBox>
</template>
<style lang="less" scoped>
.input-ratio {
  position: relative;
  width: 15%;
}
</style>
